<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Email Subscribe</title>
  </head>
  <body>
    <!-- 背景容器 -->
    <div class="flex items-center justify-center h-screen bg-zinc-700">
      <!-- 卡片 -->
      <div class="bg-zinc-800 p-2 mx-6 rounded-2xl">
        <!-- 弹性容器 -->
        <div class="flex flex-col rounded-l-xl md:flex-row">
          <!-- 图片 -->
          <img
            src="/image.jpg"
            alt=""
            class="rounded-xl object-fit h-80 transform duration-200 hover:scale-105 hover:rounded-xl md:h-64 md:rounded-l-xl md:rounded-r-none"
          />
          <!-- 内容 -->
          <div class="p-6 md:p-12">
            <h2
              class="font-serif text-xl font-medium text-center text-white md:text-left"
            >
              在收件箱中获取饮食和健身提示
            </h2>
            <p
              class="max-w-xs my-4 text-xs leading-5 tracking-wide text-center text-white md:text-left"
            >
              吃得更好，运动得更好。订阅饮食与健身新闻报。
            </p>
            <div
              class="flex flex-col mt-5 space-y-4 md:flex-row md:space-x-3 md:space-y-0"
            >
              <input
                type="email"
                placeholder="输入你的邮箱地址"
                class="p-2 px-4 text-center text-white bg-zinc-800 border border-zinc-600 placeholder:text-xs placeholder:text-center md:text-left placeholder:md:text-left focus:outline-none"
              />
              <button
                class="px-5 py-3 text-xs rounded-md text-zinc-800 bg-lime-500 hover:bg-lime-700 hover:text-white duration-500"
              >
                订阅
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="/main.js"></script>
  </body>
</html>
